<template>
  <div class="app-container newsConfigure-list-wrap"> 
     
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary" 
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible=true" >添加</el-button>
      </el-col>  
      <el-col :span="1.5">
        <el-button
          type="danger" 
          icon="el-icon-delete"
          :disabled="multiple"
          size="mini" >删除</el-button>
      </el-col>  
    </el-row>
    <el-table v-loading="loading" max-height="550" :data="dataList" border @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="40" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" >编辑</el-button> 
        </template>
      </el-table-column>
      <el-table-column label="消息类型" prop="dictCode" />
      <el-table-column label="发送类型" prop="dictLabel"></el-table-column>
      <el-table-column label="通知用户" prop="dictValue" /> 
      <el-table-column label="模板code" prop="dictValue" /> 
      <el-table-column label="内容" prop="dictValue" /> 
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="消息配置"
      :visible.sync="dialogVisible"
      width="600px" >
      <div class="dialog-form-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
           
          <el-form-item label="消息类型：" prop="name">
            <el-select v-model="ruleForm.status" placeholder="请选择" clearable style="width: 85%;">
              <el-option  label="激活" value="1" />
              <el-option  label="停用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="发送类型：" prop="name">
            <el-checkbox-group v-model="ruleForm.type"> 
              <el-checkbox label="站内信" name="type"></el-checkbox>
              <el-checkbox label="短信" name="type"></el-checkbox>
              <el-checkbox label="邮件" name="type"></el-checkbox> 
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="通知后端用户：" prop="name" >
            <treeselect
              v-model="ruleForm.parentId"
              :options="companyData"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择"
              style="width: 85%;" />
          </el-form-item> 
          <el-form-item label="模板code：" prop="name">
            <el-input v-model="ruleForm.name" style="width: 85%;"></el-input>
          </el-form-item> 
          <el-form-item label="自定义内容：" prop="name">
            <el-input type="textarea" v-model="ruleForm.name" style="width: 85%;"></el-input>
          </el-form-item> 
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>  
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "NewsConfigure",  
  components: { Treeselect },
  data() {
    return { 
      loading:false,  
      multiple:true, 
      dialogVisible:false,
      queryParams:{
        pageNum:1,
        pageSize:30
      },
      ruleForm:{
        type:[]
      },
      rules:{},
      companyData:[],
      dataList:[{name:'123',id:'1'}],
      total:0
      
    };
  },
 
  
  created() {
   
    
  },
  methods: { 
     /** 转换菜单数据结构 */
     normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    handleAdd(){
       
    }, 
    getList(){}, 
    handleSelectionChange(val){
      console.log(val)
      this.seleteData=val 
      this.multiple = !val.length
    } 
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
